<template>
  <div class="wrapper">
    <div class="title">转店达人</div>
    <div class="senior_div">
      <ul class="senior_ul clearfix" ref="seniorLi" :style="'width:' + seniorWidth + 'rem;'">
        <li :class="{active:liNum==index}" v-for="(item, index) in name_info" :key="index" @click="liNum=index">
          <img :src="getImgUrl(item.img)">
        </li>
      </ul>
    </div>
    <div class="senior_details clearfix">
      <div class="senior_details_left">
        <div class="hei_zi jiacu zi_36">{{name_info[liNum].name}}<span>资深商铺顾问</span></div>
        <div class="hui_6 zi_28">服务经验：<span>{{name_info[liNum].exp}}</span><span class="hei_zi zi_15">年</span></div>
        <div class="hui_6 zi_28">店面服务：<span>{{name_info[liNum].servenum}}</span><span class="hei_zi zi_15">家</span></div>
      </div>
      <div class="senior_details_right">
        <div><a :href="'tel:' + name_info[liNum].phone">一键拨号</a></div>
      </div>
    </div>
  </div>
</template>

<script>
import BnameInfo from '../../../assets/json/Bteamview.json'
import WnameInfo from '../../../assets/json/Wteamview.json'
export default {
  name: 'CompanySenior',
  data () {
    return {
      name_info: [],
      seniorWidth: 0,
      liNum: 0
    }
  },
  beforeMount () {
    this.Dcity = sessionStorage.getItem('Dcity')
    if (this.Dcity === '武汉') {
      this.name_info = WnameInfo
    } else {
      this.name_info = BnameInfo
    }
  },
  mounted () {
    // let width = this.$refs.seniorLi.offsetWidth
    // console.log(width)
    this.seniorWidth = this.name_info.length * 1.8
  },
  methods: {
    getImgUrl (img) {
      return require('../../../assets/img/team/' + img)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  padding 0 .4rem
  padding-right 0
  margin-bottom .6rem /* 30/50 */
  .title
    height .8rem /* 40/50 */
    line-height .8rem /* 40/50 */
    font-size .4rem /* 20/50 */
    font-weight bold
  .senior_div
    width 100%
    height 2.1rem
    display -webkit-box
    overflow-x scroll
    overflow-y scroll
    .senior_ul
      height 2.1rem
      padding .2rem 0 .3rem 0
      li
        width 1.5rem /* 75/50 */
        height 1.5rem /* 75/50 */
        margin-right .3rem /* 15/50 */
        float left
        border 1px solid #FFFFFF
        box-shadow 0px 0px 5px 0px rgba(4, 0, 0, 0.2)
        border-radius 50%
        img
          width 100%
      .active
        border 1px solid #F6360A
  .senior_details
    margin-right .4rem
    background #F8F8F8
    padding .3rem
    border-radius 5px
    .senior_details_left
      float left
      width 60%
      span
        color #F6360A
        font-size .3rem /* 15/50 */
      .jiacu
        margin-bottom .2rem /* 25/50 */
        span
          font-size .24rem /* 12/50 */
          margin-left .2rem /* 10/50 */
    .senior_details_right
      float right
      width 40%
      div
        width 1.66rem /* 83/50 */
        height .66rem /* 33/50 */
        line-height .66rem /* 33/50 */
        background linear-gradient(90deg, #F14510, #EE340F)
        box-shadow 1px 1px 5px 0px rgba(255, 1, 1, 0.42)
        border-radius 5px
        color #fff
        float right
        text-align center
        margin-top .44rem /* 22/50 */
</style>
